<template>
  <div class="flow">
    <div class="formLook">
      <div class="applicant-details">
        <!-- 左侧内容 -->
        <div class="scroll-container-left">
          <TitleComponent title="面试录用流程" />
          <div class="scroll-content">
            <!-- 左侧内容 -->
            <!-- 附件简历 -->
            <AttachmentSection :FirstData="FirstData" />
            <!-- 基本信息 -->
            <BasicInfoSection :FirstData="FirstData" />
            <!-- HR 流程确认 -->
            <HRProcessSection :FirstData="FirstData" />
            <!-- 面试预约 -->
            <InterviewAppointmentSection :FirstData="FirstData" />

            <!-- 面试信息 -->
            <InterviewInfoSection
              :FirstData="FirstData"
              :sys_interview_method="sys_interview_method"
              v-if="
                route.query.interview == '复面' ||
                route.query.interview == '面试结束'
              "
            />

            <!-- 面试信息二 -->
            <InterviewInfoSectionTwo
              :FirstData="FirstData"
              v-if="route.query.interview == '面试结束'"
            />

            <!-- Offer 信息 -->
            <OfferInfoSection
              :FirstData="FirstData"
              v-if="
                route.query.interview == '面试结束' &&
                FirstData.joinTime == null
              "
            />
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="scroll-container-right">
          <div class="firstTitle">
            <div class="icon">
              <el-icon>
                <ArrowLeft />
              </el-icon>
            </div>
            <div class="topTitle">当前流程</div>
          </div>
          <el-divider />

          <div class="scroll-content-right">
            <!-- 右侧内容 -->
            <CurrentProcessSection
              v-if="route.query.interview == '初面'"
              @submit="handleSubmit"
              @save="handleSave"
              @cancel="handleCancel"
              :sys_interview_type="sys_interview_type"
              :sys_interview_method="sys_interview_method"
              :requireProposerOptions="requireProposerOptions"
              :initialData="FirstData"
            />

            <CurrentCoverlay
              v-if="route.query.interview == '复面'"
              @submit="handleSubmit"
              @save="handleSave"
              @cancel="handleCancel"
              :initialData="FirstData"
            >
            </CurrentCoverlay>

            <OfferForm
              v-if="route.query.interview == '面试结束'"
              @submit="handleSubmit"
              @save="handleSave"
              @cancel="handleCancel"
              :initialData="FirstData"
            >
            </OfferForm>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AttachmentSection from "../ViewComponent/ApplicantDetails.vue";
import BasicInfoSection from "../ViewComponent/BasicInfoSection.vue";
import HRProcessSection from "../ViewComponent/HRProcessSection.vue";
import InterviewAppointmentSection from "../ViewComponent/InterviewAppointmentSection.vue";
import InterviewInfoSection from "../ViewComponent/InterviewInfoSection.vue";
import OfferInfoSection from "../ViewComponent/OfferInfoSection.vue";
import CurrentProcessSection from "../ViewComponent/CurrentProcessSection.vue";
// CurrentCoverlay.vue
import CurrentCoverlay from "../ViewComponent/CurrentCoverlay.vue";
// OfferForm.vue
import OfferForm from "../ViewComponent/OfferForm.vue";
import { formatDate } from "@/utils/index.js";
import { seachPersonList } from "@/api/recruitment/needWorkers/index.js";
import { useRoute, useRouter } from "vue-router";
import { jobApplicationInfo } from "@/api/recruitment/jobApplication/index.js";
import InterviewInfoSectionTwo from "../ViewComponent/InterviewInfoSectionTwo.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  interviewInitiationSave,
  inputInfoFirst,
  inputInfoSecond,
  inputOfferInfo,
} from "@/api/recruitment/recruitmentProcess/index.js";
const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();
const {
  sys_contact_information,
  sys_follow_up,
  sys_interview_method,
  sys_interview_type,
} = proxy.useDict(
  "sys_contact_information",
  "sys_follow_up",
  "sys_interview_method",
  "sys_interview_type"
);
// 岗
const FirstData = reactive({
  /** 姓名 */
  name: "",

  /** 性别 */
  sex: "",

  /** 联系电话 */
  phoneNumber: "",

  /** 邮箱 */
  mail: "",

  /** 身份证号 */
  idNumber: "",

  /** 出生日期 */
  birthTime: "",

  /** 年龄 */
  age: "",

  /** 学历 */
  educationalBackground: "",

  /** 毕业院校 */
  graduateSchool: "",

  /** 专业 */
  profession: "",

  /** 简历附件 */
  resumeFile: "",

  /** 个人照片 */
  personPhoto: "",

  /** 备注 */
  remarks: "",

  /** 应聘岗位id */
  applicationPositonId: "",

  /** 应聘岗位name */
  applicationPositonName: "",

  /** 应聘渠道 */
  applicationSource: "",

  /** 需求部门id */
  requireDeptId: "",

  /** 需求部门name */
  requireDeptName: "",

  /** 部门编号 */
  jobCode: "",

  /** 需求人数 */
  needNum: "",

  /** 期望到岗日期 */
  hopeArrivalTime: "",

  /** 工作经历 */
  workExperiences: "",

  //面试发起
  /** HRId */
  hrId: "",

  /** HR名字 */
  hrName: "",

  /** 联系时间 */
  contactTime: "",

  /** 联系方式 */
  contactInformation: "",

  /** 后续流程 */
  followUp: "",

  /** 沟通记录的内容 */
  content: "",

  /** 面试预约时间 */
  appointmentTime: "",

  /** 面试官id */
  interviewerId: "",

  /** 面试官名字 */
  interviewerName: "",

  /** 面试方式 */
  interviewMethod: "",

  /** 面试类型 */
  interviewType: "",

  /** 面试地址/视频会议地址 */
  address: "",

  //一面信息
  /** 一轮面试时间 */
  firstInterviewerTime: "",

  /** 一轮面试结果 0通过，1不通过*/
  firstInterviewerResult: "",

  /** 是否需要二轮面试 0是，1否 */
  isSecond: "",

  /** 二轮面试官id */
  interviewerIdSecond: "",

  /** 二轮面试官名字 */
  interviewerNameSecond: "",

  /** 二轮面试类型 */
  interviewTypeSecond: "",

  /** 二轮面试方式 */
  interviewMethodSecond: "",

  /** 二轮面试预约时间 */
  appointmentTimeSecond: "",

  /** 二轮面试地址/视频会议地址 */
  addressSecond: "",

  /** 一轮面试内容记录 */
  firstContent: "",

  //二面信息
  /** 二轮面试时间 */
  interviewerTimeSecond: "",

  /** 二轮面试结果 0通过 1不通过 */
  interviewerResultSecond: "",

  /** 二轮面试内容记录 */
  secondContent: "",

  //offer信息
  /** 预计入职日期 */
  joinTime: "",

  /** 期望薪资 */
  expectedSalary: "",

  /** 最终薪资 */
  finalSalary: "",

  /** offer状态 0接受 1拒绝 */
  offerStatus: "",

  /** 拒绝原因 */
  refusalReason: "",

  /** 是否入职 0是 1否*/
  isJoin: "",

  /** 未入职原因 */
  notJoinReason: "",

  /** 录用通知文件 */
  hireFile: "",
});

const requireProposerOptions = reactive([]);
onMounted(() => {
  searchBMLD();
  if (route.query.id) {
    getJobInfo(route.query.id);
  }
});
const getJobInfo = (id) => {
  jobApplicationInfo(Number(id)).then((res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item]) {
          FirstData[item] = res.data[item];
          FirstData.sex = res.data.sex;

          // 预约面试时间

          if (FirstData.firstInterviewerTime) {
            // 面试结果
            FirstData.firstInterviewerResult = Number(
              FirstData.firstInterviewerResult
            );

            // 是否需要第二轮面试
            FirstData.isSecond = Number(FirstData.isSecond);

            FirstData.isJoin = Number(FirstData.isJoin);
            FirstData.offerStatus = Number(FirstData.offerStatus);

            FirstData.interviewerResultSecond = Number(
              FirstData.interviewerResultSecond
            );
          }

          // 第二轮面试类型
          sys_interview_type.value.forEach((active) => {
            if (active.value == FirstData.interviewTypeSecond) {
              FirstData.interviewTypeSecond = active.label;
            }
          });

          // 第二轮面试方式
          sys_interview_method.value.forEach((active) => {
            // console.log(active.value);
            if (active.value == FirstData.interviewMethodSecond) {
              FirstData.interviewMethodSecond = active.label;
            }
          });
        }
      });
    }
  });
};
const searchBMLD = async () => {
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      console.log(item, "itemitem");
      let label = item.userName;
      let value = item.userId;
      requireProposerOptions.push({
        label,
        value,
      });
    });
  }
};

const handleSubmit = (data) => {
  // 提交逻辑
  console.log("提交数据:", data);
  // ElMessage.success('表单提交成功');
  data.firstInterviewerTime = formatDate(data.firstInterviewerTime).dates;
  data.appointmentTimeSecond = formatDate(data.appointmentTimeSecond).dates;

  requireProposerOptions.forEach((item) => {
    if (data.interviewerIdSecond == item.value) {
      data.interviewerNameSecond = item.label;
    }
  });

  if (route.query.interview == "初面") {
    let params = {
      id: Number(route.query.id),
      firstInterviewerTime: data.firstInterviewerTime, //一轮面试时间
      firstInterviewerResult: Number(data.firstInterviewerResult), //一轮面试结果
      isSecond: Number(data.isSecond), //是否需要二轮面试
      interviewerIdSecond: data.interviewerIdSecond, //二轮面试官id
      interviewTypeSecond: data.interviewTypeSecond, //二轮面试类型
      interviewMethodSecond: data.interviewMethodSecond, //二轮面试方式
      appointmentTimeSecond: data.appointmentTimeSecond, //二轮面试预约时间
      addressSecond: data.addressSecond, //二轮面试地址/视频会议地址
      firstContent: data.firstContent, //一轮面试内容记录
    };
    console.log(params, "参数参数参数");
    inputInfoFirst(params).then((res) => {
      console.log(res, "res");
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "提交成功",
        });
        handleClose();
      }
    });
  } else if (route.query.interview == "复面") {
    // id
    // interviewerTimeSecond 二轮面试时间   interviewerTimeSecond
    // interviewerResultSecond 二轮面试结果 0通过 1不通过
    // secondContent  二面内容

    // 二轮面试时间转换
    data.interviewerTimeSecond = formatDate(data.interviewerTimeSecond).dates;

    let params = {
      id: Number(route.query.id),
      interviewerTimeSecond: data.interviewerTimeSecond,
      interviewerResultSecond: Number(data.interviewerResultSecond),
      secondContent: data.secondContent,
    };

    console.log(params, "params");

    inputInfoSecond(params).then((res) => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "提交成功",
        });
        handleClose();
      }
    });
  } else if (route.query.interview == "面试结束") {
    // id
    // joinTime 预计入职日期
    // expectedSalary 期望薪资
    // finalSalary 最终薪资
    // offerStatus offer状态   0接受 1拒绝
    // refusalReason 拒绝原因
    // isJoin 是否入职 0是 1否
    // notJoinReason 未入职原因
    // hireFile 录用通知文件

    data.joinTime = formatDate(data.joinTime).dates;
    // joinTime
    let params = {
      id: Number(route.query.id),
      joinTime: data.joinTime,
      expectedSalary: data.expectedSalary,
      finalSalary: data.finalSalary,
      offerStatus: Number(data.offerStatus),
      refusalReason: data.refusalReason,
      isJoin: Number(data.isJoin),
      notJoinReason: data.notJoinReason,
      hireFile: data.hireFile,
      remarks: data.remarks,
    };

    console.log(params, "paramsparams");
    inputOfferInfo(params).then((res) => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "提交成功",
        });
        handleClose();
      }
    });
  }
};

const handleSave = (data) => {
  // 保存逻辑
  console.log("保存数据:", data);

  data.firstInterviewerTime = formatDate(data.firstInterviewerTime).dates;
  data.appointmentTimeSecond = formatDate(data.appointmentTimeSecond).dates;

  requireProposerOptions.forEach((item) => {
    if (data.interviewerIdSecond == item.value) {
      data.interviewerNameSecond = item.label;
    }
  });

  let params = {
    id: Number(route.query.id),
    firstInterviewerTime: data.firstInterviewerTime,
    firstInterviewerResult: data.firstInterviewerResult,
    isSecond: data.isSecond,
    interviewerIdSecond: data.interviewerIdSecond,
    interviewTypeSecond: data.interviewTypeSecond,
    interviewMethodSecond: data.interviewMethodSecond,
    appointmentTimeSecond: data.appointmentTimeSecond,
    addressSecond: data.addressSecond,

    interviewerTimeSecond: data.interviewerTimeSecond,
    interviewerResultSecond: Number(data.interviewerResultSecond),
    secondContent: data.secondContent,

    firstContent: data.firstContent,
    joinTime: data.joinTime,
    expectedSalary: data.expectedSalary,
    finalSalary: data.finalSalary,
    offerStatus: Number(data.offerStatus),
    refusalReason: data.refusalReason,
    isJoin: Number(data.isJoin),
    notJoinReason: data.notJoinReason,
    hireFile: data.hireFile,
    remarks: data.remarks,
  };

  interviewInitiationSave(params).then((res) => {
    console.log(res, "res");
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "保存成功",
      });
      handleClose();
    }
  });
};

const handleCancel = () => {
  // 取消逻辑
  handleClose();
};

function handleClose() {
  // const obj = { path: "/recruitment/RecruitmentProcess" };
  // proxy.$tab.closeOpenPage(obj);
  router.go(-1);
}
</script>
<style scoped lang="scss">
.applicant-details {
  width: 100%;
  display: flex;
  background: #f1f2f4;
  height: 91vh; // 确保容器高度占满视口
}

/* 左侧滚动容器 */
.scroll-container-left {
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: auto;
  isolation: isolate; /* 创建新的层叠上下文，防止样式污染 */
  background: #fff;
}

/* 右侧滚动容器 */
.scroll-container-right {
  overflow-y: auto;
  width: 35%;
  margin-left: 12px;
  background: #fff;
  isolation: isolate;
}

/* 滚动内容区域 */
.scroll-content {
  flex: 1;
  overflow-y: auto; // 启用垂直滚动
  padding: 16px; // 内容间距
}

/* 美化滚动条 */
.scroll-content::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.scroll-content::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #c1c1c1;
}

.scroll-content-right {
  flex: 1;
  overflow-y: auto; // 启用垂直滚动
  // padding: 16px; // 内容间距
}
/* 美化滚动条 */
.scroll-content-right::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.scroll-content-right::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #c1c1c1;
}

/* 标题样式 */
.firstTitle {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.icon {
  margin-right: 8px;
}

.topTitle {
  font-size: 16px;
  font-weight: bold;
  color: #16181d;
}
/* 分割线样式 */
:deep(.el-divider--horizontal) {
  margin: 0;
}
</style>
